<template>
  <div class="vediobox">
    <div class="vedio-true">
      <div class="vedio-l">
        <video style="width: 100%; height: 100%" ref="video" controls></video>
      </div>
      <div class="vedio-r">
        <div class="vedio-rt">
          <span>{{ data.damName }}·实时视频</span>
          <span>{{ data.cityName }}</span>
        </div>
        <div class="vedio-rc">
          <div class="control" @mouseover="data.vedioHover = 1" @mouseleave="data.vedioHover = 0">
            <div>
              <div></div>
              <div @mouseover="data.directionHover.top = true" @mouseleave="data.directionHover.top = false"
                @click="vedioControlClick('UP')">
                <img :src="data.directionHover.top == true
            ? getImageUrl('top1')
            : getImageUrl('top')
            " />
              </div>
              <div></div>
            </div>
            <div>
              <div @mouseover="data.directionHover.left = true" @mouseleave="data.directionHover.left = false"
                @click="vedioControlClick('LEFT')">
                <img :src="data.directionHover.top == true
            ? getImageUrl('left1')
            : getImageUrl('left')
            " />
              </div>
              <div @mouseover="data.directionHover.center = true" @mouseleave="data.directionHover.center = false"
                @click="vedioControlClick('STOP')">
                <img :src="data.directionHover.top == true
            ? getImageUrl('center1')
            : getImageUrl('center')
            " />
              </div>
              <div @mouseover="data.directionHover.right = true" @mouseleave="data.directionHover.right = false"
                @click="vedioControlClick('RIGHT')">
                <img :src="data.directionHover.top == true
            ? getImageUrl('right1')
            : getImageUrl('right')
            " />
              </div>
            </div>
            <div>
              <div></div>
              <div @mouseover="data.directionHover.bottom = true" @mouseleave="data.directionHover.bottom = false"
                @click="vedioControlClick('DOWN')">
                <img :src="data.directionHover.top == true
            ? getImageUrl('bottom1')
            : getImageUrl('bottom')
            " />
              </div>
              <div></div>
            </div>
            <div class="vedio-hover" v-show="data.vedioHover == 1">
              <p>
                上下左右方向用于控制监控视角的调整，中间的圆形用于控制监控器的暂停和视角转动
              </p>
            </div>
          </div>
        </div>
        <div class="vedio-rb">
          <div class="yzdBtnDiv">
            <button v-for="item in props.yzdList" :key="item.presetPointIndex" @click="moveToPresets(item)"
              :disabled="item.presetPointIndex == data.presetPointIndex">
              {{ item.presetPointName }}
            </button>
          </div>
          <button class="vedio-btn" @click="closeVideo">关闭视频</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, watch, onMounted } from "vue";
const emit = defineEmits(["closeVideoClick"]);
const props = defineProps(["yzdList", "ydbId", "newData", "ydbType"]);
import { videoControl, getMoveToPresets } from "../../api/index.ts";
import flvjs from "flv.js/dist/flv";
import Hls from "hls.js";

const video = ref(null);

let data = reactive({
  vedioHover: 0, // 控制video控制按钮的hover的效果
  damName: "",
  cityName: "",
  flvPlayer: null,
  videoDeviceId: "",
  hls: null,
  directionHover: {
    top: false,
    right: false,
    bottom: false,
    left: false,
    center: false,
  },
  presetPointIndex: null,
  videosList: [],
  videoInfo: {},
});
onMounted(() => { });
watch(
  () => {
    return props.yzdList;
  },
  (newVal: any) => {
    // console.log(newVal, "newVal");
  },
  { deep: true }
);
const hlsVedioOpen = (
  url: any,
  damName: any,
  cityName: any,
  videoDeviceId: any
) => {
  data.damName = damName;
  data.cityName = cityName;
  data.videoDeviceId = videoDeviceId;
  let vedio = video.value;
  if (url && url.length > 0) {
    if (Hls.isSupported()) {
      data.hls = new Hls();
      data.hls.loadSource(url);
      data.hls.attachMedia(vedio);
      data.hls.on(Hls.Events.MANIFEST_PARSED, () => {
        console.log("加载成功！");
        vedio.play();
      });
      data.hls.on(Hls.Events.ERROR, (event: any, data: any) => {
        console.log("加载失败", data);
      });
    }
  }
};
const moveToPresets = (item: any) => {
  data.presetPointIndex = item.presetPointIndex
  var params = {
    id: props.ydbId,
    presetIndex: item.presetPointIndex,
    type: props.ydbType
  };
  getMoveToPresets(params)
    .then((res: any) => {
      if (res.data.code === 200) {
        // data.newBuildDamlist = res.data.data;
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};
const renderVideo = (
  url: any,
  damName: any,
  cityName: any,
  videoDeviceId: any
) => {
  data.damName = damName;
  data.cityName = cityName;
  data.videoDeviceId = videoDeviceId;
  let videoElement = video.value;
  if (url && url.length > 0) {
    if (flvjs.isSupported()) {
      data.flvPlayer = flvjs.createPlayer({
        type: "flv",
        url: url,
      });
      data.flvPlayer.attachMediaElement(videoElement);
      data.flvPlayer.load();
      data.flvPlayer.play();
    }
  }
};
const vedioControlClick = (order: string) => {
  const params = new URLSearchParams();
  params.append("action", order != "STOP" ? 0 : 1);
  params.append("command", order != "STOP" ? order : "");
  params.append("cameraIndexCode", data.videoDeviceId);
  videoControl(params).then((res: any) => {
    if (res.data.code == 200) {
      console.log("调整成功");
    }
  });
  setTimeout(() => {
    const paramsT = new URLSearchParams();
    paramsT.append("action", 1);
    paramsT.append("command", order != "STOP" ? order : "");
    paramsT.append("cameraIndexCode", data.videoDeviceId);
    videoControl(paramsT).then((res: any) => {
      if (res.data.code == 200) {
        console.log("调整成功");
      }
    });
  }, 1000);
};
const closeVideo = () => {
  if (data.flvPlayer) {
    data.flvPlayer.pause();
    data.flvPlayer.unload();
    data.flvPlayer.detachMediaElement();
    data.flvPlayer.destroy();
    data.flvPlayer = null;
  }
  if (data.hls) {
    data.hls.destroy();
    data.hls = null;
  }
  emit("closeVideoClick");
};
defineExpose({
  renderVideo,
  hlsVedioOpen
});
const getImageUrl = (name: string) => {
  return new URL(`../../assets/img/dam/${name}.png`, import.meta.url).href;
};
</script>

<style lang="less" scoped>
.vediobox {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60vw;
  height: 60vh;
  z-index: 25;
  background-color: rgba(0, 1, 32, 0.6) !important;
  border: 2px dashed aquamarine;

  .vedio-true {
    width: 100%;
    height: 100%;
    display: flex;

    .vedio-l {
      width: 75%;
      height: 100%;
      padding-left: 15px;
    }

    .vedio-r {
      width: 25%;
      height: 100%;

      .vedio-rt {
        width: 100%;
        height: 20%;
        color: #fff;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 15px;

        &>span:nth-child(1) {
          font-size: 1.5rem;
          font-weight: bold;
        }

        &>span:nth-child(2) {
          font-size: 0.9rem;
        }
      }

      .vedio-rc {
        width: 100%;
        height: 50%;

        background-size: 90;
        display: flex;
        justify-content: center;
        align-items: center;

        .control {
          width: 200px;
          height: 200px;
          position: relative;
          background: url(../../assets/img/dam/circle.png) no-repeat;

          &>div {
            width: 100%;
            height: 33.3%;
            display: flex;

            &>div {
              width: 33.3%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .vedio-hover {
            position: absolute;
            bottom: -38%;
            width: 200px;
            height: 70px;
            background-color: #fff;
            padding: 5px;
            font-size: 0.8rem;
            border-radius: 5px;
            color: #000f1e;
          }
        }
      }

      .vedio-rb {
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;

        .yzdBtnDiv {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;

          button {
            width: 27%;
            padding: 7px 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: none;
            font-family: "YSBTH";
            font-size: 1rem;
            cursor: pointer;
          }
        }

        .vedio-btn {
          width: 80%;
          padding: 7px 30px;
          border-radius: 5px;
          border: none;
          font-family: "YSBTH";
          font-size: 1.2rem;
          margin: 1vh 0 0 2vh;
        }
      }
    }
  }

  .vedio-false {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 100px;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
    font-weight: bold;

    // font-family: "YSBTH";
    .vedio-btn {
      padding: 7px 30px;
      border-radius: 5px;
      border: none;
      font-family: "YSBTH";
      font-size: 1.2rem;
    }
  }
}
</style>